<template>
	<div class="question-main">
		<div class="question-title">
			{{qIndex+1}}.
			<span v-html="question.questionTitle"></span>
		</div>
		<div class="options-list" v-if="question.options">
			<div class="options-item" v-for="(option,index) in question.options" :key="index">
				<div class="options-item-title " :class="setOptionsClass(option.no)" >{{option.no}}</div>
				<option-item class="options-item-main" :content="option.content">
					<span class="main-color-font" style="margin-left: 16px;" v-if="!showUserAnswer && index == CHARACTERS.indexOf(question.answer)">正确答案</span>
				</option-item>
			</div>
			<div class="no-answer"v-if="showUserAnswer && !question.isDone" ><i class="el-icon-warning"></i>未答</div>
		</div>
		<div class="question-info" v-if="showComplex">
			<div class="question-info-title">难易程度:</div>
			<div class="question-info-main" >
				{{complexList[question.complex - 1]}}
			</div>
		</div>
		<div class="question-info">
			<div class="question-info-title">答案解析:</div>
			<div class="question-info-main" v-html="question.analysis">
			</div>
		</div>
	</div>
	
</template>

<script>
	import OptionItem from "./OptionItem.vue";
	import {character,complexList} from "@/common/question.js";
	export default{
		name:"SingleQuestion",
		components:{
			"option-item":OptionItem
		},
		props:{
			question:{
				type:Object,
				require:true
			},
			qIndex:{
				type:Number
			},
			showUserAnswer:{
				type:Boolean,
				default:false
			},
			showComplex:{
				type:Boolean,
				default:true
			}
		},
		mounted(){
		},
		data(){
			return{
				CHARACTERS:character,
				complexList:complexList
			}
		},
		methods:{
			setOptionsClass(option){
				if(!this.showUserAnswer){
					return "";
				}
				let question = this.question;
				let userAnswer  = question.userAnswer;
				let answer = question.answer;
				let c = "options-box ";
				if(option == userAnswer ){
					if(userAnswer  == answer){
						c += "right-aswner"
					}else{
						c += "error-aswer"
					}
					
				}else if(option == answer){
					c += "right-aswner"
				}
				return c;
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.question-main{
		width: 100%;
		box-sizing: border-box;
		@include flex-column(flex-start, flex-start);
		min-height: 100px;
		.question-title{
			color: #666666;
		}
		.options-list{
			@include flex-column(flex-start, flex-start);
			.no-answer{
				font-weight: bold;
				color: #FF3333;
				height: 40px;
				line-height: 40px;
				margin-top: 8px;
				font-size: 18px;
				.el-icon-warning{
					font-size: 18px;
				}
			}
			.options-item{
				@include flex-row(flex-start, flex-start);
				.options-item-title{
					width: 24px;
					color: #666666;
				}
				.options-item-main{
					line-height: 20px;
					color: #666666;
					flex: 1;
					margin: 0 8px;
				}
				margin-top: 16px;
				
				.options-box{
					height: 24px;
					line-height: 24px;
					text-align: center;
					background: #EBEEF6;
					border-radius: 50%;
					opacity: 1;
				}
				.right-aswner{
					background-color: $mainColor;
					color: #FFFFFF;
				}
				.error-aswer{
					background-color: #FF3333;
					color: #FFFFFF;
				}
			}
			
		}
		.question-info-title{
			width: 80px;
			color: #666666;
		}
		.question-info-main{
			flex: 1;
			line-height: 20px;
			color: #666666;
		}
		.question-info{
			width: 100%;
			border-top: 1px solid #EBEEF6;
			padding-top: 16px;
			margin-top: 16px;
			min-height: 40px;
			@include flex-row(flex-start, center);
		}
		
	}
	
</style>
